<template>
<el-container>
  <el-header>
    <el-menu :default-active="$route.path" router mode="horizontal">
      <el-menu-item><img  style="position: absolute;width: 125px;margin-top: 10px;" src="../assets/img.png" @click="toHomePage()" alt></el-menu-item>
      <el-menu-item style="margin-left: 200px;font-size: 17px;color: #2874cb;padding-top: 25px;">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{path: '/mainPage'}">我的课堂</el-breadcrumb-item>
          <el-breadcrumb-item>任务管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-menu-item>
      <div class="h-right">
        <div style="float: left;"><a href="https://ktp.paper880.com/" style="text-decoration: none;color: black;"><i class="el-icon-search"></i>论文查重</a></div>
        <div>
          <span style="margin-left: 25px;cursor: pointer;" @click="toTaskManagement"><i class="el-icon-document"></i>任务管理</span>
          <span style="margin: 0 12px;"><i class="el-icon-bell"></i></span>欢迎您,
          <el-dropdown>
            <span class="el-dropdown-link"><i class="el-icon-s-custom"></i>{{this.userInfo.name}}</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><span @click="goSettings()"><i class="el-icon-s-tools"></i>个人设置</span></el-dropdown-item>
              <el-dropdown-item><span @click="logout()"><i class="el-icon-remove"></i>退出登录</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </el-menu>
  </el-header>
  <el-main>
    <div style="margin-left: 250px"><span style="font-size: 25px">任务列表</span><span style="color:darkgray">共0个</span></div>
    <div>
      <el-tabs v-model="activeName" style="width: 500px;margin: 25px 250px">
        <el-tab-pane label="队列中(0)" style="font-size: 25px" name="first"></el-tab-pane>
        <el-tab-pane label="进行中(0)" style="font-size: 25px" name="second"></el-tab-pane>
        <el-tab-pane label="已完成(0)" style="font-size: 25px" name="third"></el-tab-pane>
        <el-tab-pane label="异常任务(0)" style="font-size: 25px" name="fourth"></el-tab-pane>
      </el-tabs>
      <el-empty></el-empty>
    </div>
  </el-main>
</el-container>
</template>

<script>
export default {
  name: "taskManagement",
  data(){
    return{
      userInfo: null,
      activeName: 'first'
    };
  },
  methods: {
    toTaskManagement(){
      this.$router.push("/taskManagement")
    },
    toHomePage() {
      this.$router.push("/homePage")
    },
    goSettings() {
      this.$router.push("/settings")
    },
    logout() {
      localStorage.removeItem('userInfo')
      this.$router.push("/login")
    },
  },
  mounted() {
    // 在组件加载时从LocalStorage中获取用户信息
    const userInfoString = localStorage.getItem('userInfo');
    if (userInfoString) {
      this.userInfo = JSON.parse(userInfoString);
    }
  }
}
</script>

<style scoped>
.h-right{
  float: right;
  width: 490px;
  margin-top: 25px;
  font-size: 17px;
}
.el-dropdown-link{
  cursor:pointer;
  color: #409EFF;
}
</style>
